<template>
  <div class="sort">
    <div class="search">
      <i class="return" @click="$router.back(-1)"></i>
      <div class="s-search"  @click="e_gosearch">
        <search-btn></search-btn>
      </div>
    </div>
    <div class="sort-content">
      <div class="sort-list" ref="sortList">
        <ul>
          <li v-for="(list, index) in leftData" :key="index" class="list-item" :class="{'active': index === listIndex}" @click="listClick(index, list.id)">
            <span>{{list.label}}</span>
          </li>
        </ul>
      </div>
      <div class="sort-shop">
        <sort-goods :goods="rightData" :headImg="img" :title="title" :listIndex="listIndex" @OutGood="_goList"></sort-goods>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import sortGoods from '@c/sortGoods/sortGoods'
  import searchBtn from '@c/searchBtn/searchBtn'
  import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'
  export default {
    name: 'Exchange',
    data() {
      return {
        shops: [],
        leftData: [], //左部列表数据
        rightData: [], //右部列表数据
        title: [], //当前选择名
        img: [], //当前选择图片
        lsitScroll: {}, //滚动对象
        listIndex: 0,
      }
    },

    components: {
      'sort-goods': sortGoods,
      'search-btn': searchBtn,
    },

    computed: {},

    methods: {
      // 点击列表商品从新加载商品列表
      listClick(index, id) {
        this.listIndex = index
        this._getRigtList(id)
      },
      //查询
      e_gosearch() {
        this.$router.push('/search')
      },
      // 实现分类列表滚动
      _initScroll() {
        if (this.lsitScroll) {
          this.lsitScroll = new BScroll(this.$refs.sortList, {
            click: true,
          })
        } else {
          this.lsitScroll.refresh()
        }
      },
      // 获得左部列表数据
      _getLeftList(id) {
        // this.$store.state.loadding = true
        gpost(vlink.classify + id + '/2').then(re => {
          // this.$store.state.loadding = false
          if (re.status === 0) {
            this.leftData = re.data
            re.data.forEach(item => {
              this.img.push(item.icon)
              this.title.push(item.label)
            })
            this._getRigtList(re.data[0].id)
          } else {
            this.$Message.success(re.msg)
          }
        })
      },
      // 获得右部列表数据
      _getRigtList(id) {
        // this.$store.state.loadding = true
        gpost(vlink.classify + id + '/2').then(re => {
          // this.$store.state.loadding = false
          if (re.status === 0) {
            this.rightData = re.data
          } else {
            this.$Message.success(re.msg)
          }
        })
      },
      /**
       * 跳转列表页
       * @param good [Object] 子元素传过来的值
       * @private
       */
      _goList(good) {
        this.$router.push({
          path: '/classifyList',
          query: {
            name: good.label,
            id: good.id,
            type: 2
          }
        })
      }
    },

    mounted() {
      this._initScroll()
    },

    created() {
      // 实现分类列表滚动
      this.$nextTick(() => {
        this._initScroll()
      })
      this._getLeftList(0)
    },
  }
</script>

<style scoped>
  .sort .sort-content {
    bottom: 0;
  }
</style>
